<%--
  Created by IntelliJ IDEA.
  User: wyl
  Date: 2021-12-29
  Time: 10:50
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <!-- bootstrap核心样式文件 -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap-extend.css">
    <link href="${pageContext.request.contextPath}/css/bootstrap-table.css" rel="stylesheet">
    <!-- jquery库 必须在其他js库前引入-->
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
    <!-- bootstrap库 必须在其他js库前引入-->
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrap.js"></script>
    <script src="${pageContext.request.contextPath}/js/jquery.validate.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/jquery.form.js"></script>
    <script src="${pageContext.request.contextPath}/js/messages_zh.js"></script>
    <script src="${pageContext.request.contextPath}/js/bootstrap-extend.js"></script>
    <!-- 表格控件的支持-->
    <script src="${pageContext.request.contextPath}/js/bootstrap-table.js"></script>
    <script src="${pageContext.request.contextPath}/js/bootstrap-table-zh-CN.js"></script>
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top ">
    <div style="width: 100%;border: #2aabd2 1px solid;background-color: #2aabd2">
        <b style="font-size: 40px">Erpsystem</b>
        <span  id="span01" style="position: relative;left:70%;font-size: 20px"></span>
    </div>
    <div style="background-color: #393838">
    <div class="navbar-header" >
        <button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav1">
            <span class="glyphicon glyphicon-align-justify"></span>
        </button>
        <br>
        <!-- 品牌   文字  图片-->
       <div> <span class="glyphicon glyphicon-home" style="color: #c8c5c5;font-size: 26px;position: relative;bottom: 10px;left: 10px"></span></div>
    </div>

    <div  id="nav1" class="collapse navbar-collapse">
       <ul id="ul01" class="nav navbar-nav">

        </ul>

    </div>
    </div>
</div>

<br><br><br><br><br><br>
<div class="">
    <div style="background-color: #ffffff; height: 100%;"><br>
    <div class="row" >
        <!-- 左侧  菜单-->

        <div class="col-md-3" style="background-color: honeydew;height: 100%">
            <!-- 手风琴 -->
            <div class="panel-group" style="position: fixed;width: 20%" id="accordion" role="tablist" aria-multiselectable="true">

            </div>

        </div>

        <!-- 右侧  显示页面-->
        <div class="col-md-9">

            <!-- tab选项卡标签-->
            <div id="mytab" >
                <!-- 头部-->
<%--                <ul class="nav nav-tabs">--%>
<%--                    <li class="active"><a href="#welcome"  data-toggle="tab" style="background-color: #727171;color: #ffffff">首页</a></li>--%>
<%--                </ul>--%>

<%--                <!-- 内容-->--%>
<%--                <div class="tab-content" style="background-color: #f5f5f5; height: 1000px; ">--%>
<%--                    <div id="welcome" class="tab-pane active">欢迎使用本系统</div>--%>
<%--                </div>--%>


            </div>



        </div>
    </div>
    </div>
</div>
<div  id="template" class="panel panel-default">
    <div  class="panel-heading" id="headingOne">
        <b class="panel-title">
            <span style="position: relative;" class="glyphicon glyphicon-th-list"></span>
            <a  data-toggle="collapse"   data-parent="#accordion" href="#collapseOne" >
            </a>
        </b>
    </div>
    <div id="collapseOne" class="panel-collapse collapse" >
        <div class="panel-body">
            <ul class='list-group'>

            </ul>
        </div>
    </div>
</div>

<script>

    $("#mytab").initTabs();
    $("#mytab").addTabs("首页","glyphicon glyphicon-home","tyy/index.jsp",{},false);
    //隐藏模板div
    $("#template").hide();

    inin01(0)
    function inin01(pid){
        $.post("${pageContext.request.contextPath}/rolesbymenus.action",
            {id:pid},
            function (data) {
            console.log(data)
                //循环一级菜单
                $(data.sysMenus).each(function (index,item) {
                    var a=$("<li value="+item.id+"> <span class='glyphicon glyphicon-tasks' style='color: #c8c5c5;font-size: 20px;position: relative;top: 26px;left: 40px'></span><a style='color: #c8c5c5;font-size: 20px;position: relative;left: 50px;bottom: 10px'>"+item.name+"</a></li>")
                    $("#ul01").append(a)
                })
                //当前身份信息
                $(data.sysRoles).each(function (index,item) {
                    $("#span01").text('您当前身份:'+item.name)
                })
                //默认拿第一个一级菜单子菜单
                $(document).ready(function () {
                    inin02($("#ul01 li:eq(0)").val())
                })
                //点击菜单获取查询条件
                $("#ul01 li").click(function () {
                    inin02($(this).val())
                })
            },'json'
        )}


    function inin02(pid){
        $("#accordion div").remove()
        var pid={id:pid}
       $.post("${pageContext.request.contextPath}/querybymenus.action",
           pid,
           function (data) {
               console.log(data)
                   $(data).each(function(index, item) {
                   //克隆一份模板
                   var div1 = $("#template").clone();
                   div1.attr("id","temp"+item.id);
                   div1.show();
                   //修改一级菜单名字
                   div1.find("div[class='panel-heading']").find("a").text(item.name);
                   //改一级heading的id
                   div1.find("div[class='panel-heading']").attr("id","heading"+item.id);
                   //改 一级  href的引用id
                   div1.find("div[class='panel-heading']").find("a").attr("href","#c"+item.id);
                   //改二级 ul  body的id
                   div1.find("div[class='panel-body']").parent().attr("id","c"+item.id);

                       $(item.sysMenus).each(function(index, item01) {
                           //循环三级菜单
                         var ul = div1.find("div[class='panel-body']").find("ul");

                        var li = " <li url='"+item01.linkUrl+"' class='list-group-item'>" + item01.name + "</li>";

                           //追加  li元素
                           ul.append(li)
                       })

                   //克隆出来的div追加到  手风琴控件中
                   $("#accordion").append(div1);
               });


           },"json")
   }
    //点击菜单
    $("#accordion").click(function(e) {

        if(e.target.nodeName.toUpperCase() == "LI") {
            //选中样式
            //清空active
            $("#accordion li").removeClass("active");
            //设置·active
            $(e.target).addClass("active");

            $("#mytab").addTabs($(e.target).text(),"glyphicon glyphicon-level-up",$(e.target).attr("url"),{},true)
        }

    })




</script>
</body>
</html>
